// pages/order/order.js
import { cjRequest } from '../../utils/service'

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 顶部横向tabs切换栏目
    tabsList: [
      {
        id: 0,
        value: "全部",
        isActive: true
      },
      {
        id: 1,
        value: "待付款",
        isActive: false
      },
      {
        id: 2,
        value: "待发货",
        isActive: false
      },
      {
        id: 3,
        value: "退款/退货",
        isActive: false
      }
    ],
    // 页面的订单数据源
    ordersList: []
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  /**
   * 生命周期函数--监听页面显示
   * !如果，不想再onload方法中获取参数，而是要再onShow方法中获取页面的参数，
   * !可以通过【页面栈】来获取跳转页面的url数组，并且拿到对应的参数
   */
  onShow: function () {
    /**
     * !代码段输入：getCurrentPages  就会生成下面的一行代码，用原生方法获取当前小程序跳转到此页面的【页面栈】数组数据，进而拿到页面对应的参数了
       options字段就是跳转过来的页面所携带的参数
       route字段就是页面的路径
     * ?【页面栈】数组中【最后一个数据】，就是当前页面的路径和参数 ==> curPages[curPages.length-1]
     */
    let curPages = getCurrentPages();
    console.log(curPages);
    let thisPage = curPages[curPages.length - 1]
    // 当前页面的路径和参数
    console.log(thisPage);
    // 激活选中页面标题，根据页面的参数，切换对应的tabs栏目   而且 thisPage.options=1时，tabs的对应index=0 
    this.changeTitleByIndex(thisPage.options - 1);
    // 调用获取订单页面的数据的方法，并把获取到的此页面的参数传入进去
    this.getOrdersList(thisPage.options)
  },
  // 获取页面数据
  getOrdersList (options) {
    cjRequest({
      url: '/my/orders/all',
      data: { options },
      // 这个请求需要携带header中的Authorization作为token验证
      header: { "Authorization": "dfadfdasfkjfjds" },
      method: 'GET',
    }).then((res) => {
      console.log(res);
      this.setData({
        /**
         *!这里在拿到后端返回的数据后，进行遍历源数据数组，用于将其中的【时间戳】转换成【时间格式】
         *?  ...v  ==》 将当前循环项展开，然后继续拼接数据
         *?  create_time_cn ==》自己设置的变量名，用于页面中调用，存放格式化后的时间字符串
         *?  new Date(v.create_time * 1000).toLocaleString() ==》 将时间戳格式化成好看的格式
         *! arr.map((v) => {
         *!   return { ...v, create_time_cn: (new Date(v.create_time * 1000).toLocaleString()) }
         *! })
         */

        //!箭头函数中==》加括号的函数体能返回 对象{}
        // ordersList: res.data.map((v) => {
        //   return { ...v, create_time_cn: (new Date(v.create_time * 1000).toLocaleString()) }
        // })
        ordersList: res.data.message.map(v => ({ ...v, create_time_cn: (new Date(v.create_time * 1000).toLocaleString()) }))
      })
    })
  },

  // 根据标题索引来激活选中 标题数组  封装一次，就能通过不同的方法触发tabs的状态选中
  changeTitleByIndex (index) {
    // 2 修改顶部横向tabs切换栏目 源数组
    // 拿到data中叫做 tabsList 数据，复制出一份用来修改
    let { tabsList } = this.data;
    // 通过循环，将当前传过来的index的tabs的isActive设置为true，而其他的tab项的isActive设置为false，就有对应的选中的样式了
    tabsList.forEach((v, i) =>
      i === index ? (v.isActive = true) : (v.isActive = false)
    );
    // 3 赋值修改过后的数据到data中本来的tabs数据源，用于页面渲染 
    this.setData({
      tabsList,
      // 等价于===》tabsList:tabsList  (同名变量可以简写)
    });
  },
  // 获取从子组件传回来的数据
  getTabsItemChange (e) {
    // 1 获取传过来的被点击的标题索引
    const { index } = e.detail;
    // 调用修改tabs的isActive字段的方法，切换tab的选中状态
    this.changeTitleByIndex(index);
    // 手动切换tab收，要重新发送请求获取当前tabs的页面数据，而且 thisPage.options=1时，tabs的对应index=0 
    this.getOrdersList(index + 1);
  }

})